<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>1-FetchAPI概述与基本使用</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style></style>
  </head>
  <body>
    <div id="app"></div>
    <script>
      //1: fetch restful风格API - GET
      // fetch('http://www.localhost:3000/books/188', {
      //   method: 'get',
      // })
      //   .then(function (data) {
      //     return data.text();
      //   })
      //   .then(function (data) {
      //     console.log(data); //fetch - GET的id是：188
      //   });

      // 2: fetch restful风格API - POST
      // fetch('http://www.localhost:3000/books', {
      //   method: 'post',
      //   body: 'username=zs&password=123456',
      //   headers: {
      //     'Content-Type': 'application/x-www-form-urlencoded',
      //   },
      // })
      //   .then(function (data) {
      //     return data.text();
      //   })
      //   .then(function (data) {
      //     console.log(data); //fetch -POST接收到的请求参数是:zs====123456
      //   });

      // 3:fetch restful风格API - DELETE
      // fetch('http://www.localhost:3000/books/123', {
      //   method: 'delete',
      // })
      //   .then(function (data) {
      //     return data.text();
      //   })
      //   .then(function (data) {
      //     console.log(data); //fetch - DELETE删除成功， ID是：123
      //   });

      // 4: fetch restful风格API - PUT
      // fetch('http://www.localhost:3000/books/123', {
      //   method: 'put',
      //   body: JSON.stringify({
      //     username: 'zs',
      //     password: '123456',
      //   }),
      //   headers: {
      //     'Content-Type': 'application/json',
      //   },
      // })
      //   .then(function (data) {
      //     return data.text();
      //   })
      //   .then(function (data) {
      //     console.log(data);
      //   });

      fetch('http://localhost:3000/books/123', {
        method: 'put',
        body: JSON.stringify({
          uname: '张三',
          pwd: '789',
        }),
        headers: {
          'Content-Type': 'application/json',
        },
      })
        .then(function (data) {
          return data.text();
        })
        .then(function (data) {
          console.log(data); //fetch - PUT更新成功， 接收到的参数是：123====张三=====789
        });
    </script>
  </body>
</html>
